<template>
  <layout-header/>
  <main class="base-layout-main">
    <aside class="base-layout-sidebar">
      <div class="menu">
        <div class="menu-item" v-for="(item, index) in menuList" v-bind:key="index"
             v-bind:class="{active:index===menuActive}"
             v-on:click="handleMenuItemChange(index)">
          <el-icon class="icon">
            <component v-bind:is="item.icon"/>
          </el-icon>
          <span class="label">{{ item.label }}</span>
        </div>
      </div>
      <div class="tool">
        <div class="tool-item" v-for="(item, index) in toolList" v-bind:key="index">{{ item.label }}</div>
      </div>
    </aside>
    <router-view class="base-layout-page"/>
  </main>
</template>

<script>
import LayoutHeader from "@/components/base-layout-header.vue";

export default {
  components: {LayoutHeader},
  data() {
    return {
      menuActive: 0,
      menuList: [
        {label: "消息", icon: "Message", path: "/home"},
        {label: "视频会议", icon: "VideoCamera", path: "/video"},
        {label: "日历", icon: "Calendar"},
        {label: "云文档", icon: "Document"},
        {label: "通讯录", icon: "User"},
        {label: "工作台", icon: "Grid"}
      ],
      toolList: [
        {label: "北"},
        {label: "中"}
      ]
    }
  },
  mounted() {
    let path = this.$route.path;
    let index = this.menuList.findIndex(item => path.startsWith(item.path));
    this.menuActive = index || 0;
  },
  methods: {
    handleMenuItemChange(index) {
      this.menuActive = index;
      let path = this.menuList[index].path;
      if (path) {
        this.$router.push({path: path});
      }
    }
  }
}
</script>

<style scoped>
.base-layout-main {
  height: calc(100% - 50px);
  display: flex;
  flex-direction: row;
}

.base-layout-sidebar {
  width: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.base-layout-sidebar .menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.base-layout-sidebar .menu-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  padding: 10px 0;
  cursor: pointer;
  margin-bottom: 10px;
  border-radius: 5px;
  transition: background-color 200ms;
}

.base-layout-sidebar .menu-item:not(.active):hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.base-layout-sidebar .menu-item.active {
  background-color: rgba(0, 0, 0, 0.6);
}

.base-layout-sidebar .menu-item .icon {
  font-size: 20px;
}

.base-layout-sidebar .menu-item .label {
  font-size: 10px;
  margin-top: 5px;
}

.base-layout-sidebar .tool .tool-item {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #6388FC;
  border-radius: 5px;
  color: #FFFFFF;
  cursor: pointer;
}

.base-layout-page {
  width: calc(100% - 60px);
}
</style>